<style>
    .select-icon {
        box-sizing: content-box;
    }
</style>
<form id="dialog-add-content" class="dialog-add-content" name="contract_form" novalidate style="width:800px;">

    <div class="table-header mt5" style="position: relative; margin-bottom: 10px;">
        <div class="clearfix" style="padding-bottom:4px;">
            <span class="fl f14 lh30 text-indent">基本信息</span>
        </div>
    </div>
    <div class="form-group mt10 clearfix">
        <span class="col-sm-4 control-label form-cell"><em class="c-red">*&nbsp;</em>合同号：</span>

        <div class="col-sm-10">
            <input ng-model="data.ContractNum" name="ContractNum" class="input-text" type="text" required>
        </div>

        <div ng-messages="contract_form.ContractNum.$error"
             ng-show="contract_form.$submitted || contract_form.ContractNum.$touched">
            <p class="error" ng-message="required">不能为空。</p>
        </div>
    </div>

    <div class="form-group mt10 clearfix">
        <span class="col-sm-4 control-label form-cell"><em class="c-red">*&nbsp;</em>合同甲方：</span>

        <div class="col-sm-10">
            <input ng-model="data.PartyA" name="PartyA" class="input-text" type="text" required>
        </div>

        <div ng-messages="contract_form.PartyA.$error"
             ng-show="contract_form.$submitted || contract_form.PartyA.$touched">
            <p class="error" ng-message="required">不能为空。</p>
        </div>
    </div>

    <div class="form-group mt10 clearfix">
        <span class="col-sm-4 control-label form-cell"><em class="c-red">*&nbsp;</em>区域：</span>
        <div class="col-sm-10">
            <div class="fl select" style="max-height: 200px;"
                 name="area"
                 ui-combobox
                 show-filter="true"
                 data="items"
                 ng-model="data.area_id"
                 text-field="name"
                 value-field="value"
                 required>
            </div>
        </div>
            <span ng-messages="contract_form.area.$error"
                  ng-show="contract_form.$submitted || contract_form.area.$touched">
                <span class="error" ng-message="required">区域不能为空。</span>
            </span>
    </div>
    <div class="form-group mt10 clearfix">
        <span class="col-sm-4 control-label form-cell"><em class="c-red">*&nbsp;</em>授权类型：</span>

        <div class="col-sm-16 clearfix">
            <label class="radio fl" style="margin:0 50px 0 0">
                <input type="radio" name="authType" value="1" ng-model="data.authType" disabled>
                <span>正常授权</span>
            </label>

            <label class="radio fl" style="margin:0 50px 0 0">
                <input type="radio" name="authType" value="2" ng-model="data.authType" disabled>
                <span>分期赠送</span>
            </label>

            <label class="radio fl" style="margin:0 50px 0 0">
                <input type="radio" name="authType" value="3" ng-model="data.authType" disabled>
                <span>赠送授权</span>
            </label>

            <label class="radio fl" style="margin:0 50px 0 0">
                <input type="radio" name="authType" value="4" ng-model="data.authType" disabled>
                <span>特批授权</span>
            </label>
        </div>
    </div>
    <div class="form-group mt10 clearfix" ng-if="data.authType==4">
        <span class="col-sm-4 control-label form-cell"><em class="c-red">*&nbsp;</em>特批类型：</span>
        <div class="col-sm-10">
            <div class="fl select" style="max-height: 200px;"
                 name="category"
                 ui-combobox
                 data="categoryList"
                 ng-model="data.category"
                 text-field="name"
                 value-field="value"
                 required>
            </div>
        </div>
       <span ng-messages="contract_form.category.$error"
             ng-show="(contract_form.$submitted || contract_form.category.$touched) && contract_form.category.$error.required">
       <span class="error" ng-message="required">特批类型不能为空</span>
       </span>

    </div>
    <div class="form-group mt10 clearfix" ng-if="data.authType==4">
        <span class="fl lh30 col-sm-4 form-cell"><em class="c-red">*&nbsp;</em>承诺兑现日期：</span>
        <div class="col-sm-14 clearfix ">
            <input type="text" class="input-text input-data fl ng-pristine ng-valid ng-touched" readonly=""
                   ui-date="" format="yyyy-MM-dd" name="promiseFulfilTime" ng-model="data.promiseFulfilTime" required/>
             <span ng-messages="contract_form.promiseFulfilTime.$error" style="margin-left: 10px;" class="lh30"
                   ng-show="contract_form.$submitted || contract_form.promiseFulfilTime.$touched">
                 <span class="error" ng-message="required">承诺兑现日期不能为空</span>
             </span>
        </div>
    </div>
    <div class="form-group mt10 clearfix" ng-if="data.authType==4">
        <span class="fl lh30 col-sm-4 form-cell">实际兑现日期：</span>
        <div class="col-sm-14 clearfix ">
            <input type="text" class="input-text input-data fl ng-pristine ng-valid ng-touched" readonly=""
                   ui-date="" format="yyyy-MM-dd" name="actualFulfilTime" ng-model="data.actualFulfilTime">
        </div>
    </div>
    <div class="form-group mt10 clearfix" ng-if="data.authType==4">
        <span class="fl lh30 col-sm-4 form-cell"><em class="c-red">*&nbsp;</em>兑换责任人：</span>
        <div class="col-sm-8 clearfix ">
            <input select2 id="promiseFulfilPrinciple" name="promiseFulfilPrinciple"
                   data-ng-model="data.promiseFulfilPrinciple" select2-model="ddl2Principle"
                   config="ddlConfigPrinciple" class="form-control" required/>
           <span ng-messages="contract_form.promiseFulfilPrinciple.$error" style="margin-left: 10px;" class="lh30"
                 ng-show="contract_form.$submitted || contract_form.promiseFulfilPrinciple.$touched">
               <span class="error" ng-message="required">兑换责任人不能为空</span>
           </span>
        </div>
    </div>
    <div class="form-group mt10 clearfix">
        <span class="fl lh30 col-sm-4 form-cell">账号开通时间：</span>
        <div class="col-sm-14 clearfix ">
            <input type="text" class="input-text input-data fl ng-pristine ng-valid ng-touched" readonly=""
                   ui-date="" format="yyyy-MM-dd" name="establish_time" ng-model="data.establish_time">
        </div>
    </div>
    <div class="tab f14 mt15 clearfix">
        <ul>
            <li>
                授权信息
            </li>
        </ul>
        <div class="tab-bottom-line"></div>
    </div>
    <div class="sheet">
        <table width="100%" class="mt15">
            <thead>
            <tr>
                <th class="w60">序号</th>
                <th class="w300">套餐包名称</th>
                <th class="w80">授权项目数</th>
                <th class="w230">租期</th>
                <th class="w80">购买类型</th>
                <th class="w100" ng-if="data.ContractId">绑定项目数</th>
                <th class="w100" ng-if="data.ContractId">可用项目数</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in data.packages">
                <td height="34" class="ng-binding">{{$index+1}}</td>
                <td>{{item.friendly_name}}</td>
                <td>
                    <input class="w80" type="number" integer ng-model="item.total_num" disabled required name="total_num_{{$index}}">
                </td>
                <td>
                    <input type="text"
                           class="input-text input-data fl ng-pristine ng-valid ng-touched w100"
                           readonly=""
                           ui-date=""
                           format="yyyy-MM-dd"
                           ng-change="rentStartDateChange(item)"
                           ng-model="item.begin_on">
                    <span class="fl lh30">&nbsp;&nbsp;-&nbsp;&nbsp;</span>
                    <input type="text"
                           class="input-text input-data fl ng-pristine ng-untouched ng-valid w100"
                           readonly=""
                           ui-date=""
                           format="yyyy-MM-dd"
                           ng-model="item.end_on" required>
                </td>
                <td>{{item.contract_type|contractType}}</td>
                <td ng-if="data.ContractId">{{item.used_num}}</td>
                <td ng-if="data.ContractId">{{item.total_num-item.used_num}}</td>
            </tr>
            </tbody>
        </table>
    </div>
</form>
